<template>
    <div class="weiding">
        <el-dialog
            custom-class="my-dialog"
            :visible.sync="dialog1Visible"
            title="NG预警信息"
            :width="dialogwidth"
            :height="dialogHeight"
            >
            <div class="warningbody">
                <i class="el-icon-warning-outline"></i>&nbsp;二次氦检1线扫码NG{{ line1currentValue1 }}pcs,已达到预警值！
            </div>
        </el-dialog>
        <el-dialog
            custom-class="my-dialog"
            :visible.sync="dialog2Visible"
            title="NG预警信息"
            :width="dialogwidth"
            :height="dialogHeight"
            >
            <div class="warningbody">
                <i class="el-icon-warning-outline"></i>&nbsp;二次氦检1线检测NG{{ line1currentValue2 }}pcs,已达到预警值！
            </div>
        </el-dialog>
        <el-dialog
            custom-class="my-dialog"
            :visible.sync="dialog3Visible"
            title="NG预警信息"
            :width="dialogwidth"
            :height="dialogHeight"
            >
            <div class="warningbody">
                <i class="el-icon-warning-outline"></i>&nbsp;二次氦检2线扫码NG{{ line2currentValue1 }}pcs,已达到预警值！
            </div>
        </el-dialog>
        <el-dialog
            custom-class="my-dialog"
            :visible.sync="dialog4Visible"
            title="NG预警信息"
            :width="dialogwidth"
            :height="dialogHeight"
            >
            <div class="warningbody">
                <i class="el-icon-warning-outline"></i>&nbsp;二次氦检2线检测NG{{ line2currentValue2 }}pcs,已达到预警值！
            </div>
        </el-dialog>
        <el-dialog
            custom-class="my-dialog"
            :visible.sync="dialog5Visible"
            title="NG预警信息"
            :width="dialogwidth"
            :height="dialogHeight"
            >
            <div class="warningbody">
                <i class="el-icon-warning-outline"></i>&nbsp;二次氦检3线扫码NG{{ line3currentValue1 }}pcs,已达到预警值！
            </div>
        </el-dialog>
        <el-dialog
            custom-class="my-dialog"
            :visible.sync="dialog6Visible"
            title="NG预警信息"
            :width="dialogwidth"
            :height="dialogHeight"
            >
            <div class="warningbody">
                <i class="el-icon-warning-outline"></i>&nbsp;二次氦检3线检测NG{{ line3currentValue2 }}pcs,已达到预警值！
            </div>
        </el-dialog>
        <div class="toparea">
            <div class="statuslist">
                <div class="status_description">
                    <img src="../assets/green.png" class="status1">
                    <p class="description">生产</p>
                </div>
                <div class="status_description">
                    <img src="../assets/yellow.png" class="status2">
                    <p class="description">待机</p>
                </div>
                <div class="status_description">
                    <img src="../assets/red.png" class="status3">
                    <p class="description">停机</p>
                </div>
            </div>
            <div class="currenttime">{{ currentTime }}</div>
        </div>
        <div class="mainarea">
            <div class="line1">
                <div class="title">二次氦检1线</div>
                <div class="running_state">
                    <p class="subtitle">运行状态时序图</p>
                    <div class="statearea">
                        <div class="statecontent">
                            <div class="currentstate">
                                <p class="childtitle">运行状态</p>
                                <img src="../assets/green.png" class="eqpstatus1" v-show="detectionline1.isrun">
                                <img src="../assets/yellow.png" class="eqpstatus2" v-show="detectionline1.isstandby" v-if="isFlashing">
                                <img src="../assets/red.png" class="eqpstatus3" v-show="detectionline1.isshutdown" v-if="isFlashing">
                            </div>
                            <div id="chart1"></div>
                        </div>
                    </div>
                </div>
                <div class="Realtime_Alarm">
                    <p class="subtitle">报警信息</p>
                    <div class="alarmarea">
                        <div class="alarmcontent">
                            <div class="alarmtopic">
                                <img src="../assets/alarm_light.png" class="alarmlight">
                                <p class="alarmtitle">1线异常报警</p>
                            </div>
                            <!-- <el-button type="info" size="mini" round @click="restartdetectionline1()">复位/启动</el-button> -->
                            <el-table
                                class="alarmlist"
                                :data="tableData1"
                                :header-cell-style="{ padding:0,background:'#0a1136',color:'white',textAlign:'center'}"
                                :cell-style="{padding:0,background:'#0d1543',color:'red',textAlign:'center',fontWeight:'bold'}"
                                style="width: 100%">
                                <el-table-column
                                    prop="startAlarmTime"
                                    label="报警时间"
                                    width="160">
                                </el-table-column>
                                <el-table-column
                                    prop="alarmDetails"
                                    label="报警信息"
                                    show-overflow-tooltip>
                                </el-table-column>
                            </el-table>
                        </div>
                    </div>
                </div>
                <div class="defectinfor">
                    <p class="subtitle">NG品数据</p>
                    <div class="defectarea">
                        <div class="defectcontent">
                            <div id="chart2"></div>
                            <div id="chart3">
                                <p class="defecttext">扫码NG</p>
                                <div class="defectdetail">
                                    <el-progress :text-inside="true" :stroke-width="24" :percentage="progressValue(line1currentValue1,maxValue1)" :color="line1progressColor1"></el-progress>
                                    <p>{{ line1currentValue1 }}/{{ maxValue1 }}</p>
                                </div>
                                <p class="defecttext">检测NG</p>
                                <div class="defectdetail">
                                    <el-progress :text-inside="true" :stroke-width="24" :percentage="progressValue(line1currentValue2,maxValue2)" :color="line1progressColor2"></el-progress>
                                    <p>{{ line1currentValue2 }}/{{ maxValue2 }}</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="production_data">
                    <p class="subtitle">生产数据</p>
                    <div class="productionarea">
                        <div class="productioncontent">
                            <div id="chart4"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="line2">
                <div class="title">二次氦检2线</div>
                <div class="running_state">
                    <p class="subtitle">运行状态时序图</p>
                    <div class="statearea">
                        <div class="statecontent">
                            <div class="currentstate">
                                <p class="childtitle">运行状态</p>
                                <img src="../assets/green.png" class="eqpstatus1" v-show="detectionline2.isrun">
                                <img src="../assets/yellow.png" class="eqpstatus2" v-show="detectionline2.isstandby" v-if="isFlashing">
                                <img src="../assets/red.png" class="eqpstatus3" v-show="detectionline2.isshutdown" v-if="isFlashing">
                            </div>
                            <div id="chart5"></div>
                        </div>
                    </div>
                </div>
                <div class="Realtime_Alarm">
                    <p class="subtitle">报警信息</p>
                    <div class="alarmarea">
                        <div class="alarmcontent">
                            <div class="alarmtopic">
                                <img src="../assets/alarm_light.png" class="alarmlight">
                                <p class="alarmtitle">2线异常报警</p>
                            </div>
                            <!-- <el-button type="info" size="mini" round @click="restartdetectionline2()">复位/启动</el-button> -->
                            <el-table
                                class="alarmlist"
                                :data="tableData2"
                                :header-cell-style="{ padding:0,background:'#0a1136',color:'white',textAlign:'center'}"
                                :cell-style="{padding:0,background:'#0d1543',color:'red',textAlign: 'center',fontWeight:'bold'}"
                                style="width: 100%">
                                <el-table-column
                                    prop="startAlarmTime"
                                    label="报警时间"
                                    width="160">
                                </el-table-column>
                                <el-table-column
                                    prop="alarmDetails"
                                    label="报警信息"
                                    show-overflow-tooltip>
                                </el-table-column>
                            </el-table>
                        </div>
                    </div>
                </div>
                <div class="defectinfor">
                    <p class="subtitle">NG品数据</p>
                    <div class="defectarea">
                        <div class="defectcontent">
                            <div id="chart6"></div>
                            <div id="chart7">
                                <p class="defecttext">扫码NG</p>
                                <div class="defectdetail">
                                    <el-progress :text-inside="true" :stroke-width="24" :percentage="progressValue(line2currentValue1,maxValue1)" :color="line2progressColor1"></el-progress>
                                    <p>{{ line2currentValue1 }}/{{ maxValue1 }}</p>
                                </div>
                                <p class="defecttext">检测NG</p>
                                <div class="defectdetail">
                                    <el-progress :text-inside="true" :stroke-width="24" :percentage="progressValue(line2currentValue2,maxValue2)" :color="line2progressColor2"></el-progress>
                                    <p>{{ line2currentValue2 }}/{{ maxValue2 }}</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="production_data">
                    <p class="subtitle">生产数据</p>
                    <div class="productionarea">
                        <div class="productioncontent">
                            <div id="chart8"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="line3">
                <div class="title">二次氦检3线</div>
                <div class="running_state">
                    <p class="subtitle">运行状态时序图</p>
                    <div class="statearea">
                        <div class="statecontent">
                            <div class="currentstate">
                                <p class="childtitle">运行状态</p>
                                <img src="../assets/green.png" class="eqpstatus1" v-show="detectionline3.isrun">
                                <img src="../assets/yellow.png" class="eqpstatus2" v-show="detectionline3.isstandby" v-if="isFlashing">
                                <img src="../assets/red.png" class="eqpstatus3" v-show="detectionline3.isshutdown" v-if="isFlashing">
                            </div>
                            <div id="chart9"></div>
                        </div>
                    </div>
                </div>
                <div class="Realtime_Alarm">
                    <p class="subtitle">报警信息</p>
                    <div class="alarmarea">
                        <div class="alarmcontent">
                            <div class="alarmtopic">
                                <img src="../assets/alarm_light.png" class="alarmlight">
                                <p class="alarmtitle">3线异常报警</p>
                            </div>
                            <!-- <el-button type="info" size="mini" round @click="restartdetectionline3()">复位/启动</el-button> -->
                            <el-table
                                class="alarmlist"
                                :data="tableData3"
                                :header-cell-style="{ padding:0,background:'#0a1136',color:'white',textAlign:'center'}"
                                :cell-style="{padding:0,background:'#0d1543',color:'red',textAlign: 'center',fontWeight:'bold'}"
                                style="width: 100%">
                                <el-table-column
                                    prop="startAlarmTime"
                                    label="报警时间"
                                    width="160">
                                </el-table-column>
                                <el-table-column
                                    prop="alarmDetails"
                                    label="报警信息"
                                    show-overflow-tooltip>
                                </el-table-column>
                            </el-table>
                        </div>
                    </div>
                </div>
                <div class="defectinfor">
                    <p class="subtitle">NG品数据</p>
                    <div class="defectarea">
                        <div class="defectcontent">
                            <div id="chart10"></div>
                            <div id="chart11">
                                <p class="defecttext">扫码NG</p>
                                <div class="defectdetail">
                                    <el-progress :text-inside="true" :stroke-width="24" :percentage="progressValue(line3currentValue1,maxValue1)" :color="line3progressColor1"></el-progress>
                                    <p>{{ line3currentValue1 }}/{{ maxValue1 }}</p>
                                </div>
                                <p class="defecttext">检测NG</p>
                                <div class="defectdetail">
                                    <el-progress :text-inside="true" :stroke-width="24" :percentage="progressValue(line3currentValue2,maxValue2)" :color="line3progressColor2"></el-progress>
                                    <p>{{ line3currentValue2 }}/{{ maxValue2 }}</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="production_data">
                    <p class="subtitle">生产数据</p>
                    <div class="productionarea">
                        <div class="productioncontent">
                            <div id="chart12"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<style scoped>
.weiding{
    width: 100%;
    height: 62.5rem;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    background: url(../assets/backimg.jpeg) no-repeat center center;
    background-size: cover;
    background-position: center;
    z-index: -1;
    color: white;
    /* background-blend-mode: overlay; */
    /* backdrop-filter: blur(3.125rem); */
}
.toparea{
    width: 100%;
    height: 3.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}
.statuslist{
    width: 30%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    position: absolute;
}
.status_description{
    width: 5.625rem;
    height: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
}
.status1{
    width: 1.875rem;
    height: 1.875rem;
}
.status2{
    width: 2.1875rem;
    height: 2.1875rem;
}
.status3{
    width: 2.5rem;
    height: 2.5rem;
}
.status1, .status2, .status3{
    margin-top: .1875rem;
}
.description{
    font-size: 1.5rem;
    vertical-align: center;
}
.currenttime{
    font-size: 1.25rem;
    position: absolute;
    right: 2.5rem;
}
.mainarea{
    width: 100%;
    height: 58.75rem;
    display: flex;
    justify-content: space-around;
    align-items: center;
}
.line1, .line2, .line3{
    width: 31%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    /* border: .125rem solid silver; */
}
.title{
    width: 100%;
    height: 2.5rem;
    background-image: linear-gradient(to right, #252c56, #090f2f);
    font-size: 1.25rem;
    display: flex;
    align-items: center;
    /* margin-bottom: .3125rem; */
}
.title::before{
    content: "";
    width: .5rem;
    height: .5rem;
    /* border-radius: 50%; */
    background: lightblue;
    margin: 0 .5rem;
}
.running_state, .Realtime_Alarm, .defectinfor, .production_data{
    width: 100%;
    height: 7.5rem;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
}
.Realtime_Alarm{
    height: 15rem
}
.defectinfor{
    height: 13.125rem;
}
.production_data{
    height: 15rem
}
.subtitle{
    color: rgba(41, 224, 227, 1);
    font-size: 1.125rem;
    font-weight: bold;
    margin-bottom: .3125rem;
}
.statearea, .alarmarea, .defectarea, .productionarea{
    width: 100%;
    height: 5.625rem;
    display: flex;
    justify-content: center;
    align-items: center;
    /* background: rgba(41, 180, 227, 0.31); */
    border-radius: .5rem;
    border: .125rem solid rgba(41, 224, 227, 1);
    box-shadow: 0rem 0rem .3125rem rgba(41, 211, 227, 1);
}
.alarmarea{
    height: 13.125rem;
}
.defectarea{
    height: 11.25rem;
}
.productionarea{
    height: 13.125rem
}
.statecontent, .alarmcontent, .productioncontent{
    width: 99%;
    height: 96%;
    background: rgba(41, 180, 227, 0.1);
    border-radius: .375rem;
    display: flex;
    flex-direction: column;
    /* box-sizing: border-box; */
    /* justify-content: space-around; */
}
.alarmcontent{
    align-items: center;
    height: 98%;
}
.defectcontent{
    width: 99%;
    height: 98%;
    background: rgba(41, 180, 227, 0.1);
    border-radius: .375rem;
    position: relative;
}
.productioncontent{
    height: 98%;
}
#chart1, #chart5, #chart9{
    width: 100%;
    height: 70%;
}
#chart2, #chart6, #chart10{ 
    width: 50%;
    height: 100%;
    position: absolute;
    margin-top: 0;
    margin-left:0;
}
#chart3, #chart7, #chart11{ 
    width: 50%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    left: 13.75rem;
    position: relative;
}
#chart4, #chart8, #chart12{
    width: 100%;
    height: 100%;
    background: #131b4a;
}
.currentstate{
    width: 50%;
    height: 30%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    position: relative;
}
.alarmtopic{
    width: 100%;
    height: 20%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.childtitle{
    position: absolute;
    margin-right: 6.875rem;
}
.eqpstatus1{
    width: 1.3125rem;
    height: 1.3125rem;
}
.eqpstatus2{
    width: 1.4375rem;
    height: 1.4375rem;
}
.eqpstatus3{
    width: 1.6875rem;
    height: 1.6875rem;
}
.alarmlight{
    width: 1.875rem;
    height: 1.875rem;
    margin-right: .625rem;
}
.alarmtitle{
    font-size: 1.25rem;
    font-weight: 800;
    color: red;
}
.alarmlist{
    margin-top: .25rem;
    height: 100%;
    overflow-y: auto; /* 当内容超出时显示垂直滚动条 */
    /* font-size: .875rem; */
}
.el-table, .el-table__expanded-cell {
    background-color: #0d1543 !important;
}
.el-table::before {
    height: 0;
}
.el-progress{
    width: 10rem;
}
.defecttext{
    margin-left: 0.625rem;
    margin-bottom: .3125rem;
}
.defectdetail{
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    margin-bottom: 1rem;
}
.warningbody{
    color: #FF4500;
    font-size: 1.75rem;
    font-weight: bold;
    display: flex;
    justify-content: center;
    align-items: center;
    /* padding: 0; */
    height: 7.5rem;
}
</style>
<script>
import * as echarts from 'echarts';
import axios from 'axios';
import { EventBus } from '../assets/event-bus'
import { EleResize } from '../assets/esresize'// 图表自适应
// import {socket1,establishCommunication1,socket2,establishCommunication2,socket3,establishCommunication3,socket4,establishCommunication4,socket5,establishCommunication5} from '../assets/socket.js'
export default{
    mounted(){
        // establishCommunication1()
        // establishCommunication2()
        // establishCommunication3()
        // establishCommunication4()
        // establishCommunication5()
        // this.detectionline1.status='3'
        // this.detectionline2.status='1'
        // this.detectionline3.status='2'
        this.getCurrentState()
        this.getCurrentAlarm()
        this.getCurrentNg()
        this.getHourProduction()
        this.getHistoryStatus()
        EventBus.$on('saveCurrentState', this.getCurrentState);
        window.addEventListener('onMessageCurrentAlarm', this.getCurrentAlarm)
        EventBus.$on('saveCurrentNg', this.getCurrentNg);      //监听实时Ng事件总线内容
        EventBus.$on('saveHourProduction', this.getHourProduction);      //监听小时别生产数据事件总线内容
        EventBus.$on('saveHistoryStatus', this.getHistoryStatus);      //监听当班历史状态事件总线内容
        this.startFlashing();
        this.initChart();
        this.fetchData();
    },
    data(){
        return{
            restart1:{detectionline1Restart:'Y'},
            restart2:{detectionline2Restart:'Y'},
            restart3:{detectionline3Restart:'Y'},
            detectionline1Status:'',
            detectionline2Status:'',
            detectionline3Status:'',
            isFlashing:undefined,
            myChart1:'',
            myChart2:'',
            myChart4:'',
            myChart5:'',
            myChart6:'',
            myChart8:'',
            myChart9:'',
            myChart10:'',
            myChart12:'',
            xAxis: [],
            yAxis: [],
            line1currentValue1: 0, // 实际值
            line1currentValue2: 0, // 实际值
            line2currentValue1: 0, // 实际值
            line2currentValue2: 0, // 实际值
            line3currentValue1: 0, // 实际值
            line3currentValue2: 0, // 实际值
            maxValue1: 30, // 最大值
            warningValue1: 25, // 预警值
            maxValue2: 25, // 最大值
            warningValue2: 20, // 预警值
            dialogwidth:'46.875rem',
            dialogHeight:'12.5rem',
            dialog1Visible:false,
            dialog2Visible:false,
            dialog3Visible:false,
            dialog4Visible:false,
            dialog5Visible:false,
            dialog6Visible:false,
            currentTime: this.getCurrentDateTime(),
            line1RunningState:[
            // {"deviceStatus":"运行","startSuchTime":"2025-02-12 08:30:00.000","endSuchTime":"2025-02-12 09:42:16.000"},
            // {"deviceStatus":"停机","startSuchTime":"2025-02-12 09:42:17.000","endSuchTime":"2025-02-12 11:05:36.000"},
            // {"deviceStatus":"运行","startSuchTime":"2025-02-12 11:05:37.000","endSuchTime":"2025-02-12 15:21:43.000"},
            // {"deviceStatus":"待机","startSuchTime":"2025-02-12 15:21:44.000","endSuchTime":"2025-02-12 18:33:12.000"},
            // {"deviceStatus":"停机","startSuchTime":"2025-02-12 18:33:13.000","endSuchTime":"2025-02-12 19:35:00.000"},
            // {"deviceStatus":"运行","startSuchTime":"2025-02-12 19:35:01.000","endSuchTime":"2025-02-12 22:02:00.000"}
            ],
            line2RunningState:[],
            line3RunningState:[],
            detectionline1:{
                status:'',
                isrun:undefined,
                isstandby:undefined,
                isshutdown:undefined
            },
            detectionline2:{
                status:'',
                isrun:undefined,
                isstandby:undefined,
                isshutdown:undefined
            },
            detectionline3:{
                status:'',
                isrun:undefined,
                isstandby:undefined,
                isshutdown:undefined
            },
            tableData1: [],
            tableData2: [],
            tableData3: [],
            line1HourProduction:{
                hourHand:[],
                qualifiedNumber:[],
                noGoodNumber:[],
                finePercent:[]
            },
            line2HourProduction:{
                hourHand:[],
                qualifiedNumber:[],
                noGoodNumber:[],
                finePercent:[]
            },
            line3HourProduction:{
                hourHand:[],
                qualifiedNumber:[],
                noGoodNumber:[],
                finePercent:[]
            }
        }
    },
    watch:{
        'detectionline1.status': function(newVal, oldVal){
            switch(this.detectionline1.status){
                case '1':
                    this.detectionline1.isrun=true
                    this.detectionline1.isstandby=false
                    this.detectionline1.isshutdown=false
                    break;
                case '2':
                    this.detectionline1.isrun=false
                    this.detectionline1.isstandby=true
                    this.detectionline1.isshutdown=false
                    break;
                case '3':
                    this.detectionline1.isrun=false
                    this.detectionline1.isstandby=false
                    this.detectionline1.isshutdown=true
                    break;
                default:
                    break;
            }
        },
        'detectionline2.status': function(newVal, oldVal){
            switch(this.detectionline2.status){
                case '1':
                    this.detectionline2.isrun=true
                    this.detectionline2.isstandby=false
                    this.detectionline2.isshutdown=false
                    break;
                case '2':
                    this.detectionline2.isrun=false
                    this.detectionline2.isstandby=true
                    this.detectionline2.isshutdown=false
                    break;
                case '3':
                    this.detectionline2.isrun=false
                    this.detectionline2.isstandby=false
                    this.detectionline2.isshutdown=true
                    break;
                default:
                    break;
            }
        },
        'detectionline3.status': function(newVal, oldVal){
            switch(this.detectionline3.status){
                case '1':
                    this.detectionline3.isrun=true
                    this.detectionline3.isstandby=false
                    this.detectionline3.isshutdown=false
                    break;
                case '2':
                    this.detectionline3.isrun=false
                    this.detectionline3.isstandby=true
                    this.detectionline3.isshutdown=false
                    break;
                case '3':
                    this.detectionline3.isrun=false
                    this.detectionline3.isstandby=false
                    this.detectionline3.isshutdown=true
                    break;
                default:
                    break;
            }
        },
        line1CurrentNgChart: function(newVal, oldVal){
            this.updateChart2()
        },
        line2CurrentNgChart: function(newVal, oldVal){
            this.updateChart6()
        },
        line3CurrentNgChart: function(newVal, oldVal){
            this.updateChart10()
        },
        line1HourProductionChart: function(newVal, oldVal){
            this.updateChart4()
        },
        line2HourProductionChart: function(newVal, oldVal){
            this.updateChart8()
        },
        line3HourProductionChart: function(newVal, oldVal){
            this.updateChart12()
        },
        line1RunningState:{
            handler(newVal, oldVal) {
                console.log('数组内部元素发生了变化', newVal, oldVal);
                this.updateChart1()
            },
            deep: true // 开启深度观察来监视数组内部对象的变化
        },
        line2RunningState:{
            handler(newVal, oldVal) {
                console.log('数组内部元素发生了变化', newVal, oldVal);
                this.updateChart5()
            },
            deep: true // 开启深度观察来监视数组内部对象的变化
        },
        line3RunningState:{
            handler(newVal, oldVal) {
                console.log('数组内部元素发生了变化', newVal, oldVal);
                this.updateChart9()
            },
            deep: true // 开启深度观察来监视数组内部对象的变化
        },
    },
    computed:{
        line1HourProductionChart(){
            return{
                hourHand:this.line1HourProduction.hourHand,
                qualifiedNumber:this.line1HourProduction.qualifiedNumber,
                noGoodNumber:this.line1HourProduction.noGoodNumber,
                finePercent:this.line1HourProduction.finePercent
            }
        },
        line2HourProductionChart(){
            return{
                hourHand:this.line2HourProduction.hourHand,
                qualifiedNumber:this.line2HourProduction.qualifiedNumber,
                noGoodNumber:this.line2HourProduction.noGoodNumber,
                finePercent:this.line2HourProduction.finePercent
            }
        },
        line3HourProductionChart(){
            return{
                hourHand:this.line3HourProduction.hourHand,
                qualifiedNumber:this.line3HourProduction.qualifiedNumber,
                noGoodNumber:this.line3HourProduction.noGoodNumber,
                finePercent:this.line3HourProduction.finePercent
            }
        },
        line1CurrentNgChart(){
            return{
                line1currentValue1:this.line1currentValue1,
                line1currentValue2:this.line1currentValue2
            }
        },
        line2CurrentNgChart(){
            return{
                line2currentValue1:this.line2currentValue1,
                line2currentValue2:this.line2currentValue2
            }
        },
        line3CurrentNgChart(){
            return{
                line3currentValue1:this.line3currentValue1,
                line3currentValue2:this.line3currentValue2
            }
        },
        line1progressColor1() {
            return this.line1showWarning1 ? '#FF4500' : '#20a0ff'; // 预警时变色
        },
        line1showWarning1() {
            // return this.currentValue >= this.warningValue;
            if(this.line1currentValue1 >= this.warningValue1){
                this.dialog1Visible=true
                return true
            }
            else{
                this.dialog1Visible=false
                return false
            }
        },
        line1progressColor2() {
            return this.line1showWarning2 ? '#FF4500' : '#20a0ff'; // 预警时变色
        },
        line1showWarning2() {
            // return this.currentValue >= this.warningValue;
            if(this.line1currentValue2 >= this.warningValue2){
                this.dialog2Visible=true
                return true
            }
            else{
                this.dialog2Visible=false
                return false
            }
        },
        line2progressColor1() {
            return this.line2showWarning1 ? '#FF4500' : '#20a0ff'; // 预警时变色
        },
        line2showWarning1() {
            // return this.currentValue >= this.warningValue;
            if(this.line2currentValue1 >= this.warningValue1){
                this.dialog3Visible=true
                return true
            }
            else{
                this.dialog3Visible=false
                return false
            }
        },
        line2progressColor2() {
            return this.line2showWarning2 ? '#FF4500' : '#20a0ff'; // 预警时变色
        },
        line2showWarning2() {
            // return this.currentValue >= this.warningValue;
            if(this.line2currentValue2 >= this.warningValue2){
                this.dialog4Visible=true
                return true
            }
            else{
                this.dialog4Visible=false
                return false
            }
        },
        line3progressColor1() {
            return this.line3showWarning1 ? '#FF4500' : '#20a0ff'; // 预警时变色
        },
        line3showWarning1() {
            // return this.currentValue >= this.warningValue;
            if(this.line3currentValue1 >= this.warningValue1){
                this.dialog5Visible=true
                return true
            }
            else{
                this.dialog5Visible=false
                return false
            }
        },
        line3progressColor2() {
            return this.line3showWarning2 ? '#FF4500' : '#20a0ff'; // 预警时变色
        },
        line3showWarning2() {
            // return this.currentValue >= this.warningValue;
            if(this.line3currentValue2 >= this.warningValue2){
                this.dialog6Visible=true
                return true
            }
            else{
                this.dialog6Visible=false
                return false
            }
        },
    },
    methods:{
        getCurrentState(){
            // console.log('二次氦检1线实时状态：',JSON.parse(localStorage.getItem('setDetectionLine1')))
            // console.log('二次氦检2线实时状态：',JSON.parse(localStorage.getItem('setDetectionLine2')))
            // console.log('二次氦检3线实时状态：',JSON.parse(localStorage.getItem('setDetectionLine3')))
            if(JSON.parse(localStorage.getItem('setDetectionLine1'))!==null){
                this.detectionline1.status = JSON.parse(localStorage.getItem('setDetectionLine1')).deviceStatus
            }
            if(JSON.parse(localStorage.getItem('setDetectionLine2'))!==null){
                this.detectionline2.status = JSON.parse(localStorage.getItem('setDetectionLine2')).deviceStatus
            }
            if(JSON.parse(localStorage.getItem('setDetectionLine3'))!==null){
                this.detectionline3.status = JSON.parse(localStorage.getItem('setDetectionLine3')).deviceStatus
            }
        },
        getCurrentAlarm(res){
            if(JSON.parse(localStorage.getItem('setCurrentAlarm'))!==null){
                const currentAlarm = JSON.parse(localStorage.getItem('setCurrentAlarm'))
                this.tableData1=currentAlarm.filter(item => item.productionProcess=='二次氦检' && item.lineNumber=='1线')
                this.tableData2=currentAlarm.filter(item => item.productionProcess=='二次氦检' && item.lineNumber=='2线')
                this.tableData3=currentAlarm.filter(item => item.productionProcess=='二次氦检' && item.lineNumber=='3线')
            }
        },
        getCurrentNg(){
            this.line1currentValue1=localStorage.getItem('setDetectionLine1CurrentValue1')
            this.line1currentValue2=localStorage.getItem('setDetectionLine1CurrentValue2')
            this.line2currentValue1=localStorage.getItem('setDetectionLine2CurrentValue1')
            this.line2currentValue2=localStorage.getItem('setDetectionLine2CurrentValue2')
            this.line3currentValue1=localStorage.getItem('setDetectionLine3CurrentValue1')
            this.line3currentValue2=localStorage.getItem('setDetectionLine3CurrentValue2')
            // console.log('二次氦检1线扫码NG：',this.line1currentValue1)
            // console.log('二次氦检1线检测NG：',this.line1currentValue2)
            // console.log('二次氦检2线扫码NG：',this.line2currentValue1)
            // console.log('二次氦检2线检测NG：',this.line2currentValue2)
            // console.log('二次氦检3线扫码NG：',this.line3currentValue1)
            // console.log('二次氦检3线检测NG：',this.line3currentValue2)
        },
        getHourProduction(){
            const line1HourProduction=JSON.parse(localStorage.getItem('setdetectionLine1HourProduction'))
            const line2HourProduction=JSON.parse(localStorage.getItem('setdetectionLine2HourProduction'))
            const line3HourProduction=JSON.parse(localStorage.getItem('setdetectionLine3HourProduction'))
            // console.log('二次氦检1线当班生产数据：',line1HourProduction)
            // console.log('二次氦检2线当班生产数据：',line2HourProduction)
            // console.log('二次氦检3线当班生产数据：',line3HourProduction)
            if(line1HourProduction!==null){
                this.line1HourProduction.hourHand=line1HourProduction.hourHand
                this.line1HourProduction.qualifiedNumber=line1HourProduction.qualifiedNumber
                this.line1HourProduction.noGoodNumber=line1HourProduction.noGoodNumber
                this.line1HourProduction.finePercent=line1HourProduction.finePercent
            }
            if(line2HourProduction!==null){
                this.line2HourProduction.hourHand=line2HourProduction.hourHand
                this.line2HourProduction.qualifiedNumber=line2HourProduction.qualifiedNumber
                this.line2HourProduction.noGoodNumber=line2HourProduction.noGoodNumber
                this.line2HourProduction.finePercent=line2HourProduction.finePercent
            }
            if(line3HourProduction!==null){
                this.line3HourProduction.hourHand=line3HourProduction.hourHand
                this.line3HourProduction.qualifiedNumber=line3HourProduction.qualifiedNumber
                this.line3HourProduction.noGoodNumber=line3HourProduction.noGoodNumber
                this.line3HourProduction.finePercent=line3HourProduction.finePercent
            }
        },
        getHistoryStatus(){
            const historyStatus=JSON.parse(localStorage.getItem('setHistoryStatus'))
            if(historyStatus!=null){
                if(historyStatus.detectionLine1RunningState.length>0){
                    this.line1RunningState=historyStatus.detectionLine1RunningState
                }
                if(historyStatus.detectionLine2RunningState.length>0){
                    this.line2RunningState=historyStatus.detectionLine2RunningState
                }
                if(historyStatus.detectionLine3RunningState.length>0){
                    this.line3RunningState=historyStatus.detectionLine3RunningState
                }
            }
        },
        startFlashing() {
            this.isFlashing = true;
            this.intervalId = setInterval(() => {
                this.isFlashing = !this.isFlashing;
                this.currentTime = this.getCurrentDateTime();
            }, 1000); // 每秒切换一次
        },
        getCurrentDateTime(){
            const now = new Date();
            return `${now.getFullYear()}-${this.padNumber(now.getMonth() + 1)}-${this.padNumber(now.getDate())}
            ${this.padNumber(now.getHours())}:${this.padNumber(now.getMinutes())}:${this.padNumber(now.getSeconds())}`;
        },
        padNumber(num) {
            return num < 10 ? '0' + num : num;
        },
        progressValue(currentValue,maxValue) {
            // return (currentValue / maxValue).toFixed(4) * 100;
            let percentdata = (currentValue / maxValue * 100).toFixed(1)
            if(Math.floor(percentdata * 10) % 10 == 0){
                percentdata=Math.round(percentdata)
            }
            else{
                percentdata=Number(percentdata)
            }
            return percentdata
        },
        initChart() {
            var chartDom1 = document.getElementById('chart1');
            var chartDom2 = document.getElementById('chart2');
            var chartDom4 = document.getElementById('chart4');
            var chartDom5 = document.getElementById('chart5');
            var chartDom6 = document.getElementById('chart6');
            var chartDom8 = document.getElementById('chart8');
            var chartDom9 = document.getElementById('chart9');
            var chartDom10 = document.getElementById('chart10');
            var chartDom12 = document.getElementById('chart12');
            this.myChart1 = echarts.init(chartDom1);
            this.myChart2 = echarts.init(chartDom2);
            this.myChart4 = echarts.init(chartDom4);
            this.myChart5 = echarts.init(chartDom5);
            this.myChart6 = echarts.init(chartDom6);
            this.myChart8 = echarts.init(chartDom8);
            this.myChart9 = echarts.init(chartDom9);
            this.myChart10 = echarts.init(chartDom10);
            this.myChart12 = echarts.init(chartDom12);
        },
        fetchData() {
            this.updateChart1();
            this.updateChart2();
            this.updateChart4();
            this.updateChart5();
            this.updateChart6();
            this.updateChart8();
            this.updateChart9();
            this.updateChart10();
            this.updateChart12();
        },
        sendAndGetMessage(value){
            axios.post('/resetStart',value).then(res=>{
                console.log(res.data)
                this.detectionline1Status=res.data.detectionline1Status
                this.detectionline2Status=res.data.detectionline2Status
                this.detectionline3Status=res.data.detectionline3Status
            })
        },
        restartdetectionline1(){
            this.$confirm('此操作将复位并启动二次氦检1线设备, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                //给后端接口复位信号
                // this.sendAndGetMessage(this.restart1)
                if(this.detectionline1Status=='0'){
                    this.$message({
                        type: 'success',
                        message: '设备复位启动成功!'
                    })
                }
                else{
                    this.$message({
                        type: 'warning',
                        message: '设备复位启动失败!'
                    })
                }
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消操作'
                });          
            })
        },
        restartdetectionline2(){
            this.$confirm('此操作将复位并启动二次氦检2线设备, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                //给后端接口复位信号
                // this.sendAndGetMessage(this.restart2)
                if(this.detectionline2Status=='0'){
                    this.$message({
                        type: 'success',
                        message: '设备复位启动成功!'
                    })
                }
                else{
                    this.$message({
                        type: 'warning',
                        message: '设备复位启动失败!'
                    })
                }
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消操作'
                });          
            })
        },
        restartdetectionline3(){
            this.$confirm('此操作将复位并启动二次氦检3线设备, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                //给后端接口复位信号
                // this.sendAndGetMessage(this.restart3)
                if(this.detectionline3Status=='0'){
                    this.$message({
                        type: 'success',
                        message: '设备复位启动成功!'
                    })
                }
                else{
                    this.$message({
                        type: 'warning',
                        message: '设备复位启动失败!'
                    })
                }
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消操作'
                });          
            })
        },
        updateChart1(){
            var data = this.line1RunningState
            var types = [
                { name: '运行', color: '#00FF00' },
                { name: '待机', color: '#FFFF00' },
                { name: '停机', color: '#ff0000' },
            ];
            var startTime;
            var datatemp = [];
            for (let i = 0; i < data.length; i++) {
                startTime = new Date(data[i].startSuchTime).getTime();
                var typeItem = types.filter(a => a.name == data[i].deviceStatus)[0];
                datatemp.push({
                    name: typeItem.name,
                    value: [
                        // parseInt(data[i].GROUPID),
                        parseInt(0),
                        new Date(data[i].startSuchTime).getTime(),
                        new Date(data[i].endSuchTime).getTime(),
                        // data[i].DIFF_MILLISEC,
                        0,
                        // data[i].NAME
                        ''
                    ],
                    itemStyle: {
                        normal: {
                            color: typeItem.color
                        }
                    }
                });
            }
            console.log(JSON.stringify(datatemp));
            var categories = data.map(item => item.deviceStatus).filter((name, index, arr) => arr.indexOf(name) === index);
            function renderItem(params, api) {
                var categoryIndex = api.value(0);
                var start = api.coord([api.value(1), categoryIndex]);
                var end = api.coord([api.value(2), categoryIndex]);
                var height = api.size([0, 1])[1] * 0.6;
                var rectShape = echarts.graphic.clipRectByRect(
                    {
                        x: start[0],
                        y: start[1] - height / 2,
                        width: end[0] - start[0],
                        height: height
                    },
                    {
                        x: params.coordSys.x,
                        y: params.coordSys.y,
                        width: params.coordSys.width,
                        height: params.coordSys.height
                    }
                );
                return (
                    rectShape && {
                        type: 'rect',
                        transition: ['shape'],
                        shape: rectShape,
                        style: api.style()
                    }
                );
            }
            function padNumber(num) {
                return num < 10 ? '0' + num : num;
            }
            const option = {
                textStyle: {
                    color: '#333',
                    fontSize: '0.6rem'
                },
                grid: {
                    top: '-20%',
                    left: '4%',
                    right:'4%',
                    bottom: '50%',
                    width: '92%'
                },
                // legend: {
                //     show: true,
                //     itemWidth: 10,
                //     itemHeight: 10,
                //     textStyle: {
                //         color: '#fff',
                //         fontSize: '0.1rem'
                //     },
                //     data: types.map(function (type) {
                //         return type.name;
                //     }),
                // },
                tooltip: {
                    show: true,
                    textStyle: {
                        fontSize: 10
                    },
                    // axisPointer: {
                    //     type: 'cross',
                    //     lineStyle: {
                    //         color: '#333'
                    //     }
                    // },
                    formatter: function (params) {
                        return params.value[4] + '\t' + params.name + '\t' + params.marker + padNumber((new Date(params.value[1])).getHours()) + ':' + padNumber((new Date(params.value[1])).getMinutes()) + '—' + padNumber((new Date(params.value[2])).getHours()) + ':' + padNumber((new Date(params.value[2])).getMinutes());
                    }
                },	
                // dataZoom: [
                // 	{
                // 		type: 'inside',
                // 		filterMode: 'weakFilter'
                // 	},
                // 	{
                // 		type: "slider",
                // 		show: true,
                // 		height: "6",
                // 		bottom: "4%",
                // 		labelFormatter: '',
                // 		backgroundColor: "white",
                // 		brushSelect: false,
                // 		minValueSpan: 3600 * 24 * 1000 * 7,
                // 		handleIcon: 'path://path://M100, 100m -75, 0a75,75 0 1,0 150,0a75,75 0 1,0 -150,0',
                // 		handleSize: 15,
                // 		handleColor: '#6bc5da',
                // 		start: 0,
                // 		end: 100,
                // 		handleStyle: {
                // 			borderCap: 'round',
                // 			color: "#fff",
                // 			shadowColor: 'rgba(0, 0, 0, 0.5)',
                // 			shadowBlur: 1
                // 		},
                // 		textStyle: {
                // 			color: "transparent"
                // 		},
                // 		borderColor: 'transparent',
                // 		backgroundColor: '#D7F4FF',
                // 		dataBackground: {
                // 			lineStyle: {
                // 				width: 0
                // 			},
                // 			areaStyle: {
                // 				color: 'transparent'
                // 			}
                // 		},
                // 		fillerColor: '#00EBFF'
                // 	}
                // ],	
                xAxis: {
                        type: 'time',
                        //min: new Date(startTime).setHours(7, 0, 0, 0),
                        //max: new Date(new Date(startTime).setDate(new Date(startTime).getDate() + 1)).setHours(7, 0, 0, 0),
                        interval: 3600000,
                        scale: true,
                        axisLabel: {
                            formatter: function (val) {
                                return new Date(val).toLocaleTimeString('en-US', { hour: '2-digit', minute: 'numeric', hour12: false });
                            }
                        },
                        splitLine: {
                            show: false
                        },
                        axisLine: {
                            show: false
                        },
                        axisTick: {
                            show: true,
                            lineStyle: {
                                color: '#FFFFFF',
                                width: 2 
                            }
                        },
                        axisLabel: {
                            textStyle: {
                                color: '#FFFFFF',
                                fontSize: '0.75rem'
                            },
                            show: true
                        }
                    },
                yAxis: [
                    {
                        yAxisIndex: 0,
                        type: 'category',
                        data: categories,
                        axisLine: {
                            show: false
                        },
                        axisTick: {
                            show: false
                        },
                        axisLabel: {
                            show: false,
                            textStyle: {
                                color: '#333',
                                fontSize: '0.8rem',
                                fontWeight: 'bolder',
                            }
                        }
                    },
                    // {
                    //     yAxisIndex: 1,
                    //     type: 'category',
                    //     data: ["100%","80%"],
                    //     axisLine: {
                    //         show: false
                    //     },
                    //     axisTick: {
                    //         show: false
                    //     },
                    //     axisLabel: {
                    //         show: true,
                    //         textStyle: {
                    //             color: '#333',
                    //             fontSize: '0.1rem',
                    //             fontWeight: 'bolder',
                    //         }
                    //     }
                    // }
                ],
                series: [
                    {
                        type: 'custom',
                        renderItem: renderItem,
                        // itemStyle: {
                        //     opacity: 0.9
                        // },
                        encode: {
                            x: [1, 2],
                            y: 0
                        },
                        data: datatemp
                    }
                ]
            };
            this.myChart1.setOption(option);
        },
        updateChart2(){
            var currentValue=Number(this.line1currentValue1)+Number(this.line1currentValue2)
            const option = {
                title: {
                    text: 'NG数量：'+currentValue,
                    left: 'center',
                    top: '3%', // 标题距离容器顶部2%的位置
                    textStyle: {
                    color: '#FFFFFF',
                    fontSize: 16,
                    // fontWeight: 'bold'
                    }
                },
                tooltip: {
                    trigger: 'item'
                },
                // legend: {
                //     top: '5%',
                //     left: 'center'
                // },
                series: [
                    {
                    // name: 'NG产量：38pcs',
                    type: 'pie',
                    center:['50%','55%'],
                    radius: ['40%', '70%'],
                    avoidLabelOverlap: false,
                    // label: {
                    //     show: false,
                    //     position: 'center'
                    // },
                    emphasis: {
                        label: {
                        show: true,
                        fontSize: 14,
                        color:'#FFFFFF',
                        fontWeight: 'bold'
                        }
                    },
                    label: {
                        show: true,
                        position:'inside',
                        fontSize: 12,
                        color:'#FFFFFF',
                        formatter: '{b}: {c}' // 显示数值和百分比
                    },
                    labelLine: {
                        show: false
                    },
                    data: [
                        { value: this.line1currentValue1, name: '扫码NG' },
                        { value: this.line1currentValue2, name: '检测NG' }
                    ]
                    }
                ]
            };
            this.myChart2.setOption(option);
        },
        updateChart4(){
            var element = document.getElementById('chart4');
            const listener = function() {
                echarts.init(element).resize()
            }
            EleResize.on(element, listener)
            const option = {
                grid: {
                    top:'28%',
                    bottom:'12%'
                },
                tooltip: {
                    trigger: 'axis',
                    // axisPointer: {
                    // type: 'cross',
                    // crossStyle: {
                    //     color: '#999'
                    // }
                    // },
                    backgroundColor: 'rgba(50, 50, 50, 0.7)', // 设置背景色为半透明黑色
                    borderColor: '#ccc', // 设置边框颜色
                    borderWidth: 1, // 设置边框宽度
                    // extraCssText: 'width: 10rem; height: 3.75rem;', // 设置宽度和高度
                    padding: [5, 10], // 设置内边距，数组中的两个值分别表示垂直和水平方向的内边距
                    textStyle: {
                        fontSize: 12, // 设置字体大小为.875rem
                        color: '#fff', // 设置字体颜色为白色
                        fontWeight:'bold'
                    },
                    position: function (point, params, dom, rect, size) {
                        // 自定义位置函数，可以根据需要返回位置信息
                        // point：鼠标位置
                        // params：数据项参数
                        // dom：tooltip的dom元素
                        // rect：图表的包含框
                        // size：视图大小
                        var viewWidth = size.viewSize[0];
                        var viewHeight = size.viewSize[1];
                        var boxWidth = dom.offsetWidth;
                        var boxHeight = dom.offsetHeight;
                        var posX = point[0];
                        var posY = point[1];
                        // 防止tooltip超出视图边界
                        if (posX + boxWidth > viewWidth) {
                            posX -= boxWidth + 10;
                        }
                        if (posY + boxHeight > viewHeight) {
                            posY -= boxHeight + 10;
                        }
                        // 可以根据需要调整位置逻辑
                        return [posX, posY];
                    }
                },
                toolbox: {
                    feature: {
                    dataView: { show: true, readOnly: false, backgroundColor: '#0d1543', 
                    textColor: 'white', textareaColor: '#0d1543', textareaBorderColor: 'silver' },
                    // magicType: { show: true, type: ['line', 'bar'] },
                    // restore: { show: true },
                    saveAsImage: { show: true, backgroundColor: 'rgba(41, 180, 227, 0.1)', name: '二次氦检1线生产数据' },
                    myFull: {
                        show: true,
                        title: '全屏',
                        icon: 'path://M432.45,595.444c0,2.177-4.661,6.82-11.305,6.82c-6.475,0-11.306-4.567-11.306-6.82s4.852-6.812,11.306-6.812C427.841,588.632,432.452,593.191,432.45,595.444L432.45,595.444z M421.155,589.876c-3.009,0-5.448,2.495-5.448,5.572s2.439,5.572,5.448,5.572c3.01,0,5.449-2.495,5.449-5.572C426.604,592.371,424.165,589.876,421.155,589.876L421.155,589.876z M421.146,591.891c-1.916,0-3.47,1.589-3.47,3.549c0,1.959,1.554,3.548,3.47,3.548s3.469-1.589,3.469-3.548C424.614,593.479,423.062,591.891,421.146,591.891L421.146,591.891zM421.146,591.891',
                        onclick: function () {
                            // 全屏查看
                            if (element.requestFullScreen) {
                                element.requestFullScreen();
                            } else if (element.msRequestFullscreen) {
                                element.msRequestFullScreen();
                            } else if (element.webkitRequestFullScreen) {
                                element.webkitRequestFullScreen();
                            } else if (element.mozRequestFullScreen) {
                                element.mozRequestFullScreen();
                            }
                            // 退出全屏
                            if (element.requestFullScreen) {
                                document.exitFullscreen()
                            } else if (element.msRequestFullScreen) {
                                document.msExitFullscreen()
                            } else if (element.webkitRequestFullScreen) {
                                document.webkitCancelFullScreen()
                            } else if (element.mozRequestFullScreen) {
                                document.mozCancelFullScreen()
                            }
                        }
                    }
                    },
                    iconStyle:{
                        borderColor: 'white',
                        // color: 'red'
                    },
                    emphasis:{
                        iconStyle:{
                            borderColor: '#00FFFF'
                        }
                    }
                },
                legend: {
                    // data: ['目标产能', '实际产能', '良率', 'OEE'],
                    textStyle:{
                        fontWeight:'bold',
                        color:'white',
                        // fontFamily: 'Arial',
                    },
                    top:'2%',
                    left:'5%'
                },
                xAxis: [
                    {
                    type: 'category',
                    data: this.line1HourProduction.hourHand,
                    axisPointer: {
                        type: 'shadow'
                    },
                    axisLabel: {
                        color:'white'
                    },
                    axisLine: {
                        lineStyle: {
                            color:'white'
                        }
                    }
                    }
                ],
                yAxis: [
                    {
                    type: 'value',
                    name: '产能',
                    nameTextStyle: {
                        color: 'white',
                        padding: -5
                    },
                    splitLine:{
                        show:true,
                        lineStyle:{
                            type:'dashed'
                        }
                    },
                    // min: 0,
                    // max: 250,
                    // interval: 50,
                    axisLabel: {
                        formatter: '{value} pcs',
                        margin:3,
                        color:'white',
                        fontSize:9
                    }
                    },
                    {
                    type: 'value',
                    name: '良率',
                    nameTextStyle: {
                        color: 'white',
                        padding: -5
                    },
                    splitLine:{
                        show:false
                    },
                    min: 0,
                    max: 100,
                    interval: 20,
                    axisLabel: {
                        formatter: '{value} %',
                        margin:3,
                        color:'white',
                        fontSize:9
                    }
                    }
                ],
                series: [
                    {
                    name: '合格品数量',
                    type: 'bar',
                    tooltip: {
                        valueFormatter: function (value) {
                        return value + ' pcs';
                        },
                    },
                    data: this.line1HourProduction.qualifiedNumber,
                    itemStyle: {
                        color: '#00FF7F' 
                    }
                    },
                    {
                    name: 'NG数量',
                    type: 'bar',
                    tooltip: {
                        valueFormatter: function (value) {
                        return value + ' pcs';
                        },
                    },
                    data: this.line1HourProduction.noGoodNumber,
                    itemStyle: {
                        color: '#FFD700' 
                    }
                    },
                    {
                    name: '良率',
                    type: 'line',
                    yAxisIndex: 1,
                    tooltip: {
                        valueFormatter: function (value) {
                        return value + ' %';
                        }
                    },
                    data: this.line1HourProduction.finePercent,
                    // lineStyle: {
                    //     color: '#FFD700' 
                    // },
                    itemStyle: {
                        color: '#1E90FF'
                    },
                    label: {
                        show: true,
                        position:'top',
                        fontSize: 8,
                        // fontWeight: 'bold',
                        color:'#FFFFFF',
                        formatter: '{c}%' // 显示百分比数值
                    }
                    },
                ]
            };
            this.myChart4.setOption(option);
        },
        updateChart5(){
            var data = this.line2RunningState
            var types = [
                { name: '运行', color: '#00FF00' },
                { name: '待机', color: '#FFFF00' },
                { name: '停机', color: '#ff0000' },
            ];
            var startTime;
            var datatemp = [];
            for (let i = 0; i < data.length; i++) {
                startTime = new Date(data[i].startSuchTime).getTime();
                var typeItem = types.filter(a => a.name == data[i].deviceStatus)[0];
                datatemp.push({
                    name: typeItem.name,
                    value: [
                        // parseInt(data[i].GROUPID),
                        parseInt(0),
                        new Date(data[i].startSuchTime).getTime(),
                        new Date(data[i].endSuchTime).getTime(),
                        // data[i].DIFF_MILLISEC,
                        0,
                        // data[i].NAME
                        ''
                    ],
                    itemStyle: {
                        normal: {
                            color: typeItem.color
                        }
                    }
                });
            }
            console.log(JSON.stringify(datatemp));
            var categories = data.map(item => item.deviceStatus).filter((name, index, arr) => arr.indexOf(name) === index);
            function renderItem(params, api) {
                var categoryIndex = api.value(0);
                var start = api.coord([api.value(1), categoryIndex]);
                var end = api.coord([api.value(2), categoryIndex]);
                var height = api.size([0, 1])[1] * 0.6;
                var rectShape = echarts.graphic.clipRectByRect(
                    {
                        x: start[0],
                        y: start[1] - height / 2,
                        width: end[0] - start[0],
                        height: height
                    },
                    {
                        x: params.coordSys.x,
                        y: params.coordSys.y,
                        width: params.coordSys.width,
                        height: params.coordSys.height
                    }
                );
                return (
                    rectShape && {
                        type: 'rect',
                        transition: ['shape'],
                        shape: rectShape,
                        style: api.style()
                    }
                );
            }
            function padNumber(num) {
                return num < 10 ? '0' + num : num;
            }
            const option = {
                textStyle: {
                    color: '#333',
                    fontSize: '0.6rem'
                },
                grid: {
                    top: '-20%',
                    left: '4%',
                    right:'4%',
                    bottom: '50%',
                    width: '92%'
                },
                // legend: {
                //     show: true,
                //     itemWidth: 10,
                //     itemHeight: 10,
                //     textStyle: {
                //         color: '#fff',
                //         fontSize: '0.1rem'
                //     },
                //     data: types.map(function (type) {
                //         return type.name;
                //     }),
                // },
                tooltip: {
                    show: true,
                    textStyle: {
                        fontSize: 10
                    },
                    // axisPointer: {
                    //     type: 'cross',
                    //     lineStyle: {
                    //         color: '#333'
                    //     }
                    // },
                    formatter: function (params) {
                        return params.value[4] + '\t' + params.name + '\t' + params.marker + padNumber((new Date(params.value[1])).getHours()) + ':' + padNumber((new Date(params.value[1])).getMinutes()) + '—' + padNumber((new Date(params.value[2])).getHours()) + ':' + padNumber((new Date(params.value[2])).getMinutes());
                    }
                },	
                // dataZoom: [
                // 	{
                // 		type: 'inside',
                // 		filterMode: 'weakFilter'
                // 	},
                // 	{
                // 		type: "slider",
                // 		show: true,
                // 		height: "6",
                // 		bottom: "4%",
                // 		labelFormatter: '',
                // 		backgroundColor: "white",
                // 		brushSelect: false,
                // 		minValueSpan: 3600 * 24 * 1000 * 7,
                // 		handleIcon: 'path://path://M100, 100m -75, 0a75,75 0 1,0 150,0a75,75 0 1,0 -150,0',
                // 		handleSize: 15,
                // 		handleColor: '#6bc5da',
                // 		start: 0,
                // 		end: 100,
                // 		handleStyle: {
                // 			borderCap: 'round',
                // 			color: "#fff",
                // 			shadowColor: 'rgba(0, 0, 0, 0.5)',
                // 			shadowBlur: 1
                // 		},
                // 		textStyle: {
                // 			color: "transparent"
                // 		},
                // 		borderColor: 'transparent',
                // 		backgroundColor: '#D7F4FF',
                // 		dataBackground: {
                // 			lineStyle: {
                // 				width: 0
                // 			},
                // 			areaStyle: {
                // 				color: 'transparent'
                // 			}
                // 		},
                // 		fillerColor: '#00EBFF'
                // 	}
                // ],	
                xAxis: {
                        type: 'time',
                        //min: new Date(startTime).setHours(7, 0, 0, 0),
                        //max: new Date(new Date(startTime).setDate(new Date(startTime).getDate() + 1)).setHours(7, 0, 0, 0),
                        interval: 3600000,
                        scale: true,
                        axisLabel: {
                            formatter: function (val) {
                                return new Date(val).toLocaleTimeString('en-US', { hour: '2-digit', minute: 'numeric', hour12: false });
                            }
                        },
                        splitLine: {
                            show: false
                        },
                        axisLine: {
                            show: false
                        },
                        axisTick: {
                            show: true,
                            lineStyle: {
                                color: '#FFFFFF',
                                width: 2 
                            }
                        },
                        axisLabel: {
                            textStyle: {
                                color: '#FFFFFF',
                                fontSize: '0.75rem'
                            },
                            show: true
                        }
                    },
                yAxis: [
                    {
                        yAxisIndex: 0,
                        type: 'category',
                        data: categories,
                        axisLine: {
                            show: false
                        },
                        axisTick: {
                            show: false
                        },
                        axisLabel: {
                            show: false,
                            textStyle: {
                                color: '#333',
                                fontSize: '0.8rem',
                                fontWeight: 'bolder',
                            }
                        }
                    },
                    // {
                    //     yAxisIndex: 1,
                    //     type: 'category',
                    //     data: ["100%","80%"],
                    //     axisLine: {
                    //         show: false
                    //     },
                    //     axisTick: {
                    //         show: false
                    //     },
                    //     axisLabel: {
                    //         show: true,
                    //         textStyle: {
                    //             color: '#333',
                    //             fontSize: '0.1rem',
                    //             fontWeight: 'bolder',
                    //         }
                    //     }
                    // }
                ],
                series: [
                    {
                        type: 'custom',
                        renderItem: renderItem,
                        // itemStyle: {
                        //     opacity: 0.9
                        // },
                        encode: {
                            x: [1, 2],
                            y: 0
                        },
                        data: datatemp
                    }
                ]
            };
            this.myChart5.setOption(option);
        },
        updateChart6(){
            var currentValue=Number(this.line2currentValue1)+Number(this.line2currentValue2)
            const option = {
                title: {
                    text: 'NG数量：'+currentValue,
                    left: 'center',
                    top: '3%', // 标题距离容器顶部2%的位置
                    textStyle: {
                    color: '#FFFFFF',
                    fontSize: 16,
                    // fontWeight: 'bold'
                    }
                },
                tooltip: {
                    trigger: 'item'
                },
                // legend: {
                //     top: '5%',
                //     left: 'center'
                // },
                series: [
                    {
                    // name: 'NG产量：38pcs',
                    type: 'pie',
                    center:['50%','55%'],
                    radius: ['40%', '70%'],
                    avoidLabelOverlap: false,
                    // label: {
                    //     show: false,
                    //     position: 'center'
                    // },
                    emphasis: {
                        label: {
                        show: true,
                        fontSize: 14,
                        color:'#FFFFFF',
                        fontWeight: 'bold'
                        }
                    },
                    label: {
                        show: true,
                        position:'inside',
                        fontSize: 12,
                        color:'#FFFFFF',
                        formatter: '{b}: {c}' // 显示数值和百分比
                    },
                    labelLine: {
                        show: false
                    },
                    data: [
                        { value: this.line2currentValue1, name: '扫码NG' },
                        { value: this.line2currentValue2, name: '检测NG' }
                    ]
                    }
                ]
            };
            this.myChart6.setOption(option);
        },
        updateChart8(){
            var element = document.getElementById('chart8');
            const listener = function() {
                echarts.init(element).resize()
            }
            EleResize.on(element, listener)
            const option = {
                grid: {
                    top:'28%',
                    bottom:'12%'
                },
                tooltip: {
                    trigger: 'axis',
                    // axisPointer: {
                    // type: 'cross',
                    // crossStyle: {
                    //     color: '#999'
                    // }
                    // },
                    backgroundColor: 'rgba(50, 50, 50, 0.7)', // 设置背景色为半透明黑色
                    borderColor: '#ccc', // 设置边框颜色
                    borderWidth: 1, // 设置边框宽度
                    // extraCssText: 'width: 10rem; height: 3.75rem;', // 设置宽度和高度
                    padding: [5, 10], // 设置内边距，数组中的两个值分别表示垂直和水平方向的内边距
                    textStyle: {
                        fontSize: 12, // 设置字体大小为.875rem
                        color: '#fff', // 设置字体颜色为白色
                        fontWeight:'bold'
                    },
                    position: function (point, params, dom, rect, size) {
                        // 自定义位置函数，可以根据需要返回位置信息
                        // point：鼠标位置
                        // params：数据项参数
                        // dom：tooltip的dom元素
                        // rect：图表的包含框
                        // size：视图大小
                        var viewWidth = size.viewSize[0];
                        var viewHeight = size.viewSize[1];
                        var boxWidth = dom.offsetWidth;
                        var boxHeight = dom.offsetHeight;
                        var posX = point[0];
                        var posY = point[1];
                        // 防止tooltip超出视图边界
                        if (posX + boxWidth > viewWidth) {
                            posX -= boxWidth + 10;
                        }
                        if (posY + boxHeight > viewHeight) {
                            posY -= boxHeight + 10;
                        }
                        // 可以根据需要调整位置逻辑
                        return [posX, posY];
                    }
                },
                toolbox: {
                    feature: {
                    dataView: { show: true, readOnly: false, backgroundColor: '#0d1543', 
                    textColor: 'white', textareaColor: '#0d1543', textareaBorderColor: 'silver' },
                    // magicType: { show: true, type: ['line', 'bar'] },
                    // restore: { show: true },
                    saveAsImage: { show: true, backgroundColor: 'rgba(41, 180, 227, 0.1)', name: '二次氦检2线生产数据' },
                    myFull: {
                        show: true,
                        title: '全屏',
                        icon: 'path://M432.45,595.444c0,2.177-4.661,6.82-11.305,6.82c-6.475,0-11.306-4.567-11.306-6.82s4.852-6.812,11.306-6.812C427.841,588.632,432.452,593.191,432.45,595.444L432.45,595.444z M421.155,589.876c-3.009,0-5.448,2.495-5.448,5.572s2.439,5.572,5.448,5.572c3.01,0,5.449-2.495,5.449-5.572C426.604,592.371,424.165,589.876,421.155,589.876L421.155,589.876z M421.146,591.891c-1.916,0-3.47,1.589-3.47,3.549c0,1.959,1.554,3.548,3.47,3.548s3.469-1.589,3.469-3.548C424.614,593.479,423.062,591.891,421.146,591.891L421.146,591.891zM421.146,591.891',
                        onclick: function () {
                            // 全屏查看
                            if (element.requestFullScreen) {
                                element.requestFullScreen();
                            } else if (element.msRequestFullscreen) {
                                element.msRequestFullScreen();
                            } else if (element.webkitRequestFullScreen) {
                                element.webkitRequestFullScreen();
                            } else if (element.mozRequestFullScreen) {
                                element.mozRequestFullScreen();
                            }
                            // 退出全屏
                            if (element.requestFullScreen) {
                                document.exitFullscreen()
                            } else if (element.msRequestFullScreen) {
                                document.msExitFullscreen()
                            } else if (element.webkitRequestFullScreen) {
                                document.webkitCancelFullScreen()
                            } else if (element.mozRequestFullScreen) {
                                document.mozCancelFullScreen()
                            }
                        }
                    }
                    },
                    iconStyle:{
                        borderColor: 'white',
                        // color: 'red'
                    },
                    emphasis:{
                        iconStyle:{
                            borderColor: '#00FFFF'
                        }
                    }
                },
                legend: {
                    // data: ['目标产能', '实际产能', '良率', 'OEE'],
                    textStyle:{
                        fontWeight:'bold',
                        color:'white',
                        // fontFamily: 'Arial',
                    },
                    top:'2%',
                    left:'5%'
                },
                xAxis: [
                    {
                    type: 'category',
                    data: this.line2HourProduction.hourHand,
                    axisPointer: {
                        type: 'shadow'
                    },
                    axisLabel: {
                        color:'white'
                    },
                    axisLine: {
                        lineStyle: {
                            color:'white'
                        }
                    }
                    }
                ],
                yAxis: [
                    {
                    type: 'value',
                    name: '产能',
                    nameTextStyle: {
                        color: 'white',
                        padding: -5
                    },
                    splitLine:{
                        show:true,
                        lineStyle:{
                            type:'dashed'
                        }
                    },
                    // min: 0,
                    // max: 250,
                    // interval: 50,
                    axisLabel: {
                        formatter: '{value} pcs',
                        margin:3,
                        color:'white',
                        fontSize:9
                    }
                    },
                    {
                    type: 'value',
                    name: '良率',
                    nameTextStyle: {
                        color: 'white',
                        padding: -5
                    },
                    splitLine:{
                        show:false
                    },
                    min: 0,
                    max: 100,
                    interval: 20,
                    axisLabel: {
                        formatter: '{value} %',
                        margin:3,
                        color:'white',
                        fontSize:9
                    }
                    }
                ],
                series: [
                    {
                    name: '合格品数量',
                    type: 'bar',
                    tooltip: {
                        valueFormatter: function (value) {
                        return value + ' pcs';
                        },
                    },
                    data: this.line2HourProduction.qualifiedNumber,
                    itemStyle: {
                        color: '#00FF7F' 
                    }
                    },
                    {
                    name: 'NG数量',
                    type: 'bar',
                    tooltip: {
                        valueFormatter: function (value) {
                        return value + ' pcs';
                        },
                    },
                    data: this.line2HourProduction.noGoodNumber,
                    itemStyle: {
                        color: '#FFD700' 
                    }
                    },
                    {
                    name: '良率',
                    type: 'line',
                    yAxisIndex: 1,
                    tooltip: {
                        valueFormatter: function (value) {
                        return value + ' %';
                        }
                    },
                    data: this.line2HourProduction.finePercent,
                    // lineStyle: {
                    //     color: '#FFD700' 
                    // },
                    itemStyle: {
                        color: '#1E90FF'
                    },
                    label: {
                        show: true,
                        position:'top',
                        fontSize: 8,
                        // fontWeight: 'bold',
                        color:'#FFFFFF',
                        formatter: '{c}%' // 显示百分比数值
                    }
                    },
                ]
            };
            this.myChart8.setOption(option);
        },
        updateChart9(){
            var data = this.line3RunningState
            var types = [
                { name: '运行', color: '#00FF00' },
                { name: '待机', color: '#FFFF00' },
                { name: '停机', color: '#ff0000' },
            ];
            var startTime;
            var datatemp = [];
            for (let i = 0; i < data.length; i++) {
                startTime = new Date(data[i].startSuchTime).getTime();
                var typeItem = types.filter(a => a.name == data[i].deviceStatus)[0];
                datatemp.push({
                    name: typeItem.name,
                    value: [
                        // parseInt(data[i].GROUPID),
                        parseInt(0),
                        new Date(data[i].startSuchTime).getTime(),
                        new Date(data[i].endSuchTime).getTime(),
                        // data[i].DIFF_MILLISEC,
                        0,
                        // data[i].NAME
                        ''
                    ],
                    itemStyle: {
                        normal: {
                            color: typeItem.color
                        }
                    }
                });
            }
            console.log(JSON.stringify(datatemp));
            var categories = data.map(item => item.deviceStatus).filter((name, index, arr) => arr.indexOf(name) === index);
            function renderItem(params, api) {
                var categoryIndex = api.value(0);
                var start = api.coord([api.value(1), categoryIndex]);
                var end = api.coord([api.value(2), categoryIndex]);
                var height = api.size([0, 1])[1] * 0.6;
                var rectShape = echarts.graphic.clipRectByRect(
                    {
                        x: start[0],
                        y: start[1] - height / 2,
                        width: end[0] - start[0],
                        height: height
                    },
                    {
                        x: params.coordSys.x,
                        y: params.coordSys.y,
                        width: params.coordSys.width,
                        height: params.coordSys.height
                    }
                );
                return (
                    rectShape && {
                        type: 'rect',
                        transition: ['shape'],
                        shape: rectShape,
                        style: api.style()
                    }
                );
            }
            function padNumber(num) {
                return num < 10 ? '0' + num : num;
            }
            const option = {
                textStyle: {
                    color: '#333',
                    fontSize: '0.6rem'
                },
                grid: {
                    top: '-20%',
                    left: '4%',
                    right:'4%',
                    bottom: '50%',
                    width: '92%'
                },
                // legend: {
                //     show: true,
                //     itemWidth: 10,
                //     itemHeight: 10,
                //     textStyle: {
                //         color: '#fff',
                //         fontSize: '0.1rem'
                //     },
                //     data: types.map(function (type) {
                //         return type.name;
                //     }),
                // },
                tooltip: {
                    show: true,
                    textStyle: {
                        fontSize: 10
                    },
                    // axisPointer: {
                    //     type: 'cross',
                    //     lineStyle: {
                    //         color: '#333'
                    //     }
                    // },
                    formatter: function (params) {
                        return params.value[4] + '\t' + params.name + '\t' + params.marker + padNumber((new Date(params.value[1])).getHours()) + ':' + padNumber((new Date(params.value[1])).getMinutes()) + '—' + padNumber((new Date(params.value[2])).getHours()) + ':' + padNumber((new Date(params.value[2])).getMinutes());
                    }
                },	
                // dataZoom: [
                // 	{
                // 		type: 'inside',
                // 		filterMode: 'weakFilter'
                // 	},
                // 	{
                // 		type: "slider",
                // 		show: true,
                // 		height: "6",
                // 		bottom: "4%",
                // 		labelFormatter: '',
                // 		backgroundColor: "white",
                // 		brushSelect: false,
                // 		minValueSpan: 3600 * 24 * 1000 * 7,
                // 		handleIcon: 'path://path://M100, 100m -75, 0a75,75 0 1,0 150,0a75,75 0 1,0 -150,0',
                // 		handleSize: 15,
                // 		handleColor: '#6bc5da',
                // 		start: 0,
                // 		end: 100,
                // 		handleStyle: {
                // 			borderCap: 'round',
                // 			color: "#fff",
                // 			shadowColor: 'rgba(0, 0, 0, 0.5)',
                // 			shadowBlur: 1
                // 		},
                // 		textStyle: {
                // 			color: "transparent"
                // 		},
                // 		borderColor: 'transparent',
                // 		backgroundColor: '#D7F4FF',
                // 		dataBackground: {
                // 			lineStyle: {
                // 				width: 0
                // 			},
                // 			areaStyle: {
                // 				color: 'transparent'
                // 			}
                // 		},
                // 		fillerColor: '#00EBFF'
                // 	}
                // ],	
                xAxis: {
                        type: 'time',
                        //min: new Date(startTime).setHours(7, 0, 0, 0),
                        //max: new Date(new Date(startTime).setDate(new Date(startTime).getDate() + 1)).setHours(7, 0, 0, 0),
                        interval: 3600000,
                        scale: true,
                        axisLabel: {
                            formatter: function (val) {
                                return new Date(val).toLocaleTimeString('en-US', { hour: '2-digit', minute: 'numeric', hour12: false });
                            }
                        },
                        splitLine: {
                            show: false
                        },
                        axisLine: {
                            show: false
                        },
                        axisTick: {
                            show: true,
                            lineStyle: {
                                color: '#FFFFFF',
                                width: 2 
                            }
                        },
                        axisLabel: {
                            textStyle: {
                                color: '#FFFFFF',
                                fontSize: '0.75rem'
                            },
                            show: true
                        }
                    },
                yAxis: [
                    {
                        yAxisIndex: 0,
                        type: 'category',
                        data: categories,
                        axisLine: {
                            show: false
                        },
                        axisTick: {
                            show: false
                        },
                        axisLabel: {
                            show: false,
                            textStyle: {
                                color: '#333',
                                fontSize: '0.8rem',
                                fontWeight: 'bolder',
                            }
                        }
                    },
                    // {
                    //     yAxisIndex: 1,
                    //     type: 'category',
                    //     data: ["100%","80%"],
                    //     axisLine: {
                    //         show: false
                    //     },
                    //     axisTick: {
                    //         show: false
                    //     },
                    //     axisLabel: {
                    //         show: true,
                    //         textStyle: {
                    //             color: '#333',
                    //             fontSize: '0.1rem',
                    //             fontWeight: 'bolder',
                    //         }
                    //     }
                    // }
                ],
                series: [
                    {
                        type: 'custom',
                        renderItem: renderItem,
                        // itemStyle: {
                        //     opacity: 0.9
                        // },
                        encode: {
                            x: [1, 2],
                            y: 0
                        },
                        data: datatemp
                    }
                ]
            };
            this.myChart9.setOption(option);
        },
        updateChart10(){
            var currentValue=Number(this.line3currentValue1)+Number(this.line3currentValue2)
            const option = {
                title: {
                    text: 'NG数量：'+currentValue,
                    left: 'center',
                    top: '3%', // 标题距离容器顶部2%的位置
                    textStyle: {
                    color: '#FFFFFF',
                    fontSize: 16,
                    // fontWeight: 'bold'
                    }
                },
                tooltip: {
                    trigger: 'item'
                },
                // legend: {
                //     top: '5%',
                //     left: 'center'
                // },
                series: [
                    {
                    // name: 'NG产量：38pcs',
                    type: 'pie',
                    center:['50%','55%'],
                    radius: ['40%', '70%'],
                    avoidLabelOverlap: false,
                    // label: {
                    //     show: false,
                    //     position: 'center'
                    // },
                    emphasis: {
                        label: {
                        show: true,
                        fontSize: 14,
                        color:'#FFFFFF',
                        fontWeight: 'bold'
                        }
                    },
                    label: {
                        show: true,
                        position:'inside',
                        fontSize: 12,
                        color:'#FFFFFF',
                        formatter: '{b}: {c}' // 显示数值和百分比
                    },
                    labelLine: {
                        show: false
                    },
                    data: [
                        { value: this.line3currentValue1, name: '扫码NG' },
                        { value: this.line3currentValue2, name: '检测NG' }
                    ]
                    }
                ]
            };
            this.myChart10.setOption(option);
        },
        updateChart12(){
            var element = document.getElementById('chart12');
            const listener = function() {
                echarts.init(element).resize()
            }
            EleResize.on(element, listener)
            const option = {
                grid: {
                    top:'28%',
                    bottom:'12%'
                },
                tooltip: {
                    trigger: 'axis',
                    // axisPointer: {
                    // type: 'cross',
                    // crossStyle: {
                    //     color: '#999'
                    // }
                    // },
                    backgroundColor: 'rgba(50, 50, 50, 0.7)', // 设置背景色为半透明黑色
                    borderColor: '#ccc', // 设置边框颜色
                    borderWidth: 1, // 设置边框宽度
                    // extraCssText: 'width: 10rem; height: 3.75rem;', // 设置宽度和高度
                    padding: [5, 10], // 设置内边距，数组中的两个值分别表示垂直和水平方向的内边距
                    textStyle: {
                        fontSize: 12, // 设置字体大小为.875rem
                        color: '#fff', // 设置字体颜色为白色
                        fontWeight:'bold'
                    },
                    position: function (point, params, dom, rect, size) {
                        // 自定义位置函数，可以根据需要返回位置信息
                        // point：鼠标位置
                        // params：数据项参数
                        // dom：tooltip的dom元素
                        // rect：图表的包含框
                        // size：视图大小
                        var viewWidth = size.viewSize[0];
                        var viewHeight = size.viewSize[1];
                        var boxWidth = dom.offsetWidth;
                        var boxHeight = dom.offsetHeight;
                        var posX = point[0];
                        var posY = point[1];
                        // 防止tooltip超出视图边界
                        if (posX + boxWidth > viewWidth) {
                            posX -= boxWidth + 10;
                        }
                        if (posY + boxHeight > viewHeight) {
                            posY -= boxHeight + 10;
                        }
                        // 可以根据需要调整位置逻辑
                        return [posX, posY];
                    }
                },
                toolbox: {
                    feature: {
                    dataView: { show: true, readOnly: false, backgroundColor: '#0d1543', 
                    textColor: 'white', textareaColor: '#0d1543', textareaBorderColor: 'silver' },
                    // magicType: { show: true, type: ['line', 'bar'] },
                    // restore: { show: true },
                    saveAsImage: { show: true, backgroundColor: 'rgba(41, 180, 227, 0.1)', name: '二次氦检3线生产数据' },
                    myFull: {
                        show: true,
                        title: '全屏',
                        icon: 'path://M432.45,595.444c0,2.177-4.661,6.82-11.305,6.82c-6.475,0-11.306-4.567-11.306-6.82s4.852-6.812,11.306-6.812C427.841,588.632,432.452,593.191,432.45,595.444L432.45,595.444z M421.155,589.876c-3.009,0-5.448,2.495-5.448,5.572s2.439,5.572,5.448,5.572c3.01,0,5.449-2.495,5.449-5.572C426.604,592.371,424.165,589.876,421.155,589.876L421.155,589.876z M421.146,591.891c-1.916,0-3.47,1.589-3.47,3.549c0,1.959,1.554,3.548,3.47,3.548s3.469-1.589,3.469-3.548C424.614,593.479,423.062,591.891,421.146,591.891L421.146,591.891zM421.146,591.891',
                        onclick: function () {
                            // 全屏查看
                            if (element.requestFullScreen) {
                                element.requestFullScreen();
                            } else if (element.msRequestFullscreen) {
                                element.msRequestFullScreen();
                            } else if (element.webkitRequestFullScreen) {
                                element.webkitRequestFullScreen();
                            } else if (element.mozRequestFullScreen) {
                                element.mozRequestFullScreen();
                            }
                            // 退出全屏
                            if (element.requestFullScreen) {
                                document.exitFullscreen()
                            } else if (element.msRequestFullScreen) {
                                document.msExitFullscreen()
                            } else if (element.webkitRequestFullScreen) {
                                document.webkitCancelFullScreen()
                            } else if (element.mozRequestFullScreen) {
                                document.mozCancelFullScreen()
                            }
                        }
                    }
                    },
                    iconStyle:{
                        borderColor: 'white',
                        // color: 'red'
                    },
                    emphasis:{
                        iconStyle:{
                            borderColor: '#00FFFF'
                        }
                    }
                },
                legend: {
                    // data: ['目标产能', '实际产能', '良率', 'OEE'],
                    textStyle:{
                        fontWeight:'bold',
                        color:'white',
                        // fontFamily: 'Arial',
                    },
                    top:'2%',
                    left:'5%'
                },
                xAxis: [
                    {
                    type: 'category',
                    data: this.line3HourProduction.hourHand,
                    axisPointer: {
                        type: 'shadow'
                    },
                    axisLabel: {
                        color:'white'
                    },
                    axisLine: {
                        lineStyle: {
                            color:'white'
                        }
                    }
                    }
                ],
                yAxis: [
                    {
                    type: 'value',
                    name: '产能',
                    nameTextStyle: {
                        color: 'white',
                        padding: -5
                    },
                    splitLine:{
                        show:true,
                        lineStyle:{
                            type:'dashed'
                        }
                    },
                    // min: 0,
                    // max: 250,
                    // interval: 50,
                    axisLabel: {
                        formatter: '{value} pcs',
                        margin:3,
                        color:'white',
                        fontSize:9
                    }
                    },
                    {
                    type: 'value',
                    name: '良率',
                    nameTextStyle: {
                        color: 'white',
                        padding: -5
                    },
                    splitLine:{
                        show:false
                    },
                    min: 0,
                    max: 100,
                    interval: 20,
                    axisLabel: {
                        formatter: '{value} %',
                        margin:3,
                        color:'white',
                        fontSize:9
                    }
                    }
                ],
                series: [
                    {
                    name: '合格品数量',
                    type: 'bar',
                    tooltip: {
                        valueFormatter: function (value) {
                        return value + ' pcs';
                        },
                    },
                    data: this.line3HourProduction.qualifiedNumber,
                    itemStyle: {
                        color: '#00FF7F' 
                    }
                    },
                    {
                    name: 'NG数量',
                    type: 'bar',
                    tooltip: {
                        valueFormatter: function (value) {
                        return value + ' pcs';
                        },
                    },
                    data: this.line3HourProduction.noGoodNumber,
                    itemStyle: {
                        color: '#FFD700' 
                    }
                    },
                    {
                    name: '良率',
                    type: 'line',
                    yAxisIndex: 1,
                    tooltip: {
                        valueFormatter: function (value) {
                        return value + ' %';
                        }
                    },
                    data: this.line3HourProduction.finePercent,
                    // lineStyle: {
                    //     color: '#FFD700' 
                    // },
                    itemStyle: {
                        color: '#1E90FF'
                    },
                    label: {
                        show: true,
                        position:'top',
                        fontSize: 8,
                        // fontWeight: 'bold',
                        color:'#FFFFFF',
                        formatter: '{c}%' // 显示百分比数值
                    }
                    },
                ]
            };
            this.myChart12.setOption(option);
        }
    }
}
</script>